<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.phone"
        placeholder="手机号"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.channelId"
        filterable
        clearable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="item in options"
          :key="item.channelId"
          :label="item.channel_name"
          :value="item.channelId"
        />
      </el-select>
      <el-select
        v-model="listQuery.authState"
        placeholder="认证状态"
        style="width: 150px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          style="width: auto"
          label="未认证"
          :value="0"
        >未认证</el-option>
        <el-option
          style="width: auto"
          label="已认证"
          :value="1"
        >已认证</el-option>
      </el-select>
      <el-select
        v-model="listQuery.level"
        placeholder="会员等级"
        style="width: 150px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          style="width: auto"
          label="普通用户"
          :value="0"
        >普通用户</el-option>
        <el-option style="width: auto" label="会员" :value="1">会员</el-option>
        <el-option
          style="width: auto"
          label="特约会员"
          :value="2"
        >特约会员</el-option>
        <el-option
          style="width: auto"
          label="测试会员"
          :value="3"
        >测试会员</el-option>
      </el-select>
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px"
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        @click="handleQuery"
      >
        查询手机号
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="编号" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="推广渠道" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.channel_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150" align="center">
        <template slot-scope="{ row }">
          <span :style="row.logined === 1 ? 'color: green' : 'color:gray'">
            *******{{ row.phone }}
          </span>
          <span v-if="row.logOut == 1">(已注销)</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="安全认证" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.auth_security == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.auth_security == 0" type="info">未认证</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="身份证正面" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.auth_id_front == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.auth_id_front == 0" type="info">未认证</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="身份证反面" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.auth_id_back == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.auth_id_back == 0" type="info">未认证</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="联系信息" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.auth_contact == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.auth_contact == 0" type="info">未认证</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="基本信息" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.auth_baseinfo == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.auth_baseinfo == 0" type="info">未认证</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="活体认证" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.auth_id_live == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.auth_id_live == 0" type="info">未认证</el-tag>
        </template>
      </el-table-column>


      <el-table-column label="银行卡信息" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.cardState == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.cardState == 0" type="info">未认证</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="认证状态" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.authState == 1" type="success">已认证</el-tag>
          <el-tag v-if="row.authState == 0" type="warning">未认证</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.level == 0">普通用户</el-tag>
          <el-tag v-if="row.level == 1" type="success">会员</el-tag>
          <el-tag v-if="row.level == 2" type="info">特约会员</el-tag>
          <el-tag v-if="row.level == 3" type="danger">测试会员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" min-width="200" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.reg_datetime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            用户详情
          </el-button>
          <!-- <el-button type="info" size="mini" @click="pushData(row.userId)">
            上送数据
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getPhoneUserList"
    />

    <el-dialog
      :title="textMap[dialogStatus]"
      width="80%"
      :visible.sync="dialogFormVisible"
    >
      <div class="nick">
        用户信息
        <p
          style="
            width: 100px;
            height: 4px;
            border-radius: 2px;
            background: #425de5;
            margin: 0 auto;
            margin-top: 10px;
          "
        />
      </div>

      <div class="link-top" />
      <UserDetail :user-base-info="userBaseInfo" />



      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table
        :data="pvData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogPvVisible = false"
        >Confirm</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="phoneQueryDig" title="查询手机号">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="phoneQueryParams"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="支付宝交易流水号" label-width="40%">
          <el-input v-model="phoneQueryParams.flowNo" />
        </el-form-item>
        <el-form-item label="商户订单号" label-width="40%">
          <el-input v-model="phoneQueryParams.orderNo" />
        </el-form-item>
        <el-form-item label="VIP会员号码" label-width="40%">
          <el-input v-model="phoneQueryParams.vipNo" />
        </el-form-item>
      </el-form>

      <p style="margin-left: 50px; font-size: 18px; font-weight: 600">
        {{ uPhone }}
      </p>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="phoneQuery">查询</el-button>
        <el-button
          type="primary"
          @click="phoneQueryDig = false"
        >关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPhoneUserList,
  getPhoneUserDetail,
  getChannelIdAndNick,
  pushData,
  phoneQuery
} from '@/api/user'
// 用户详情组件
import UserDetail from '@/components/userDetail'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'PhoneUserindex',
  components: { Pagination, UserDetail },
  directives: { waves },
  data() {
    return {
      txl: [
        {
          id: 1
        },
        {
          id: 2
        }
      ],
      phoneQueryParams: {},
      phoneQueryDig: false,
      uPhone: '',
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        phone: ''
      },
      userBaseInfo: {
        login_datetime: '',
        authBaseInfo: 1,
        authContact: 1,
        authIdentity: 1,
        contactEmail: '',
        contactName: '',
        contactPhone: '13333398469',
        email: '-',
        interest: 33.33,
        level: 0,
        loginTime: null,
        longText: 'Daily Consume',
        nick: '',
        orderGmtDatetime: '2020-05-13T09:48:35',
        phone: '',
        regAddress: 'http://127.0.0.1:8083/doc.html',
        regIp: '127.0.0.1',
        regTime: '2020-05-07T08:37:10',
        state: 1,
        userAuthId: 11,
        userId: 6,
        userOrderFlows: null,
        vipId: 1,
        vipNo: null,
        userDevice: {},
        user: {},
        userAccount: {},
        userLiveOcrLog: {},
        userMes: {},
        userContactMes: {}
      },
      times: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '用户详情',
        create: '新增'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: 'type is required', trigger: 'change' }
        ],
        timestamp: [
          {
            type: 'date',
            required: true,
            message: 'timestamp is required',
            trigger: 'change'
          }
        ],
        username: [
          { required: true, message: 'title is required', trigger: 'blur' }
        ]
      },
      downloadLoading: false,
      listLoading: false,
      optionsCopy: [],
      options: [],
      value: ''
    }
  },
  created() {
    this.getPhoneUserList(this.listQuery)
    this.getChannelIdAndNick()
  },
  methods: {
    phoneQuery() {
      phoneQuery(this.phoneQueryParams).then((res) => {
        if (res.data.code === 200) {
          this.uPhone = '查询到的手机号为：' + res.data.data
          if (!res.data.data) {
            this.uPhone = '查询到的手机号为：空'
          }
        } else {
          this.$notify({
            title: '失败',
            message: '查询失败',
            type: 'fail',
            duration: 2000
          })
        }
      })
    },
    handleQuery() {
      this.phoneQueryDig = true
    },
    async pushData(id) {
      const res = await pushData({ userId: id })
      if (res.data.code === 200) {
        this.$notify({
          title: '成功',
          message: '上送成功',
          type: 'success',
          duration: 2000
        })
      } else {
        this.$notify({
          title: '失败',
          message: '上送失败',
          type: 'fail',
          duration: 2000
        })
      }
    },
    atest(id) {
      const routeUrl = this.$router.resolve({
        path: '/map',
        query: { id: id }
      })
      window.open(routeUrl.href, '_blank')
    },
    dataFilter(val) {
      this.value = val
      if (val) {
        // val存在
        this.options = this.optionsCopy.filter((item) => {
          if (
            !!~item.channel_name.indexOf(val) ||
            !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true
          }
        })
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach((element) => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    // 获取用户列表
    async getPhoneUserList() {
      this.listLoading = true
      const res = await getPhoneUserList(this.listQuery)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
      this.listLoading = false
    },
    handleFilter() {
      this.listQuery.current = 1
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.getPhoneUserList(this.listQuery)
    },
    async handleUpdate(row) {
      // const res = await getPhoneUserDetail({ userId: row.userId })
      // if (res.data.data === null) {
      //   this.$notify({
      //     title: '错误',
      //     message: '获取失败',
      //     type: 'fail',
      //     duration: 2000
      //   })
      // }
      // this.userBaseInfo = res.data.data
      // //不需要了 this.userBaseInfo.loanApps = [{ appName: '1', gmtDatetime: '2323' }, { appName: '2', gmtDatetime: '22323' }]
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handleDelete(row, index) {
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
td {
  width: 25%;
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 500;
  color: #333;
  font-size: 20px;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  text-align: right;
  color: #666;
  font-size: 20px;
}
.title-con {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.title {
  margin-top: 0px;
  margin-left: 10px;
  font-size: 28px;
  font-weight: 400;
  /* border-bottom: 1px dashed #304156; */
  padding-bottom: 10px;
  vertical-align: middle;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  width: 120px;
  margin: 0 auto;
  /* border-bottom: solid #425DE5 5px; */
  padding-bottom: 10px;
  /* border-radius: 2px; */
}
/* .link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid #304156 2px;
} */
.link-title {
  height: 10px;
  display: inline-block;
  width: calc(100% - 175px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.link-title-5 {
  height: 10px;
  display: inline-block;
  width: calc(100% - 199px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.line {
  display: inline-block;
  height: 28px;
  width: 4px;
  background: #425de5;
  border-radius: 2px;
  vertical-align: -4px;
}
.table-width {
  width: 99%;
}
.tr-width {
  width: 99%;
}
table {
  letter-spacing: 1.5px;
}
.info-img {
  width: 243px;
  height: 153px;
}
</style>
